<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item label="样品编号" prop="sampleNum">
          <el-input v-model="queryForm.sampleNum" placeholder="任务编号" />
        </el-form-item>
        <el-form-item label="样品名称" prop="sampleName">
          <el-input v-model="queryForm.sampleName" placeholder="样品名称" />
        </el-form-item>
        <el-form-item label="检测人" prop="detectionPerson">
          <el-input v-model="queryForm.detectionPerson" placeholder="检测人" />
        </el-form-item>
        <el-form-item label="检测时间" prop="experimentRecordDate">
          <el-date-picker
            v-model="queryForm.experimentRecordDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务编号" prop="entrustTaskNum">
          <el-input v-model="queryForm.entrustTaskNum" placeholder="任务编号" />
        </el-form-item>
        <el-form-item label="委托单号" prop="orderNum">
          <el-input v-model="queryForm.orderNum" placeholder="委托单号" />
        </el-form-item>
        <el-form-item class="base-filter-button">
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>
      <div class="base-content-operate">
        <!-- <el-button
          type="primary"
          icon="el-icon-document-copy"
          @click="entrustTaskDistributionFun"
          >导出</el-button
        >-->
        <el-button
          icon="el-icon-document-copy"
          type="primary"
          @click="dialogShow"
          >结果录入</el-button
        >
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待办" name="first"></el-tab-pane>
        <el-tab-pane label="已办" name="second"></el-tab-pane>
      </el-tabs>
      <el-table
        v-if="loadEnd"
        :data="tabldeData"
        element-loading-text="Loading"
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="样品编号">
          <template slot-scope="scope">{{ scope.row.sampleInfoNum }}</template>
        </el-table-column>
        <el-table-column label="样品名称">
          <template slot-scope="scope">{{ scope.row.sampleInfoName }}</template>
        </el-table-column>
        <el-table-column v-if="activeName != 'first'" label="实际检测时间">
          <template slot-scope="scope">{{
            formatTime(scope.row.experimentRecordDate)
          }}</template>
        </el-table-column>
        <el-table-column class="renwu" label="任务单号">
          <template slot-scope="scope">{{ scope.row.entrustTaskNum }}</template>
        </el-table-column>
        <el-table-column label="检测人" prop="detectionPersonName" />
        <el-table-column label="委托单编号">
          <template slot-scope="scope">{{
            scope.row.entrustOrderNumList
          }}</template>
        </el-table-column>
        <el-table-column label="检测项目">
          <template slot-scope="{ row }">
            <div @click="showInfo(row)">
              {{ row.detectionItemList.length }}
            </div></template
          >
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">{{ scope.row.remark }}</template>
        </el-table-column>
        <el-table-column v-if="activeName == 'second'" label="状态">
          <template slot-scope="scope">{{
            scope.row.entrustTaskStatusChar
          }}</template>
        </el-table-column>
        <el-table-column v-if="activeName == 'first'" label="提交状态">
          <template slot-scope="scope">{{ scope.row.taskDataState }}</template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <div class="base-table-operation">
              <el-link type="primary" @click="selUnit(scope.row)">查看</el-link>
              <!-- <el-link
                v-if="scope.row.entrustTaskStatus === 21"
                type="primary"
                @click="edit(scope.row)"
                >修改</el-link
              > -->
            </div>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :page-index="pagination.pageIndex"
        :page-size="pagination.pageSize"
        @sizeChange="sizeChange"
        @changePage="currentChange"
      />
    </div>
    <EntrustTaskDataResult
      v-if="dialogFormVisible"
      ref="EntrustTaskDataResult"
      :dialog-form-visible.sync="dialogFormVisible"
      :sample-info-id="sampleInfoId"
      :detection-item-id="detectionItemId"
      :data="choiceData"
      :update-state.sync="updateState"
      @close="close"
    />
    <el-dialog
      v-if="detectionDialog"
      class="base-dialog"
      :class="{ readonly: true }"
      :custom-class="'panna-dialog_small'"
      :title="title"
      align="center"
      :append-to-body="true"
      :visible.sync="detectionDialog"
      :before-close="handleClose2"
    >
      <p slot="title">检测项目</p>
      <el-table
        ref="table"
        height="350px"
        :data="detectionData"
        style="width: 100%"
      >
        <el-table-column prop="detectionItemName" label="检测项目" width="180">
        </el-table-column>
        <el-table-column
          prop="methodStandardNum"
          label="方法标准编号"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="nationalStandardNum" label="产品标准编号">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import EntrustTaskDataResult from "../../../components/EntrustTaskManage/EntrustTaskDataResult.vue";
import {
  deleteRecord,
  entrustTaskResultList,
} from "../../../api/EntrustTaskManage/EntrustTask.js";
import { formatTime, formatTimeMin, formatTimeMax } from "../../../utils/time";
export default {
  name: "EntrustTaskData",
  components: { EntrustTaskDataResult },
  data() {
    return {
      detectionData: [],
      detectionDialog: false,
      activeName: "first",
      detectionItemId: [],
      sampleInfoId: [],
      tableDatas: [],
      loading: true,
      tabldeData: [],
      queryForm: {
        sampleNum: "",
        sampleName: "",
        detectionPerson: "",
        experimentRecordDate: [],
        stateDateTime: null,
        endDateTime: null,
        entrustTaskNum: "",
        orderNum: "",
        EntrustTaskStatus: [11, 21],
        Symbol: "=",
      },
      updateState: false,
      choiceData: [],
      dialogFormVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },

      loadEnd: true,
    };
  },
  created() {
    // 初始化数据
    if (this.$route.query.entrustTaskNum !== undefined) {
      this.queryForm.EntrustTaskNum = this.$route.query.entrustTaskNum;
      this.queryForm.Symbol = "=";
      this.pagination.pageIndex = 1;
      entrustTaskResultList(this.queryForm, this.pagination)
        .then((res) => {
          if (res.data !== null) {
            this.activeName = "first";
          } else {
            this.activeName = "second";
          }
        })
        .catch(() => {
          this.loading = false;
        });
    }
    this.getList("filter");
  },
  methods: {
    handleClose2() {
      this.detectionData = [];
      this.detectionDialog = false;
    },
    showInfo(row) {
      this.detectionData = [];
      this.detectionData = row.detectionItemList;
      this.detectionDialog = true;
    },
    selUnit(data) {
      this.choiceData = data;
      this.updateState = true;
      this.dialogFormVisible = true;
    },
    // 切换页签
    handleClick() {
      this.loadEnd = false;
      this.tableDatas = [];
      if (this.activeName === "first") {
        this.queryForm.Symbol = "=";
        this.queryForm.EntrustTaskStatus = [11, 21];
      } else if (this.activeName === "second") {
        this.queryForm.Symbol = ">";
        this.queryForm.EntrustTaskStatus = [12, 20];
      }
      this.sizeChange(10);
      this.$nextTick(() => {
        this.loadEnd = true;
      });
    },
    edit(row) {
      this.choiceData = row;
      console.log(row);
      this.dialogFormVisible = true;
    },
    formatTime,
    // 关闭弹框
    close() {
      this.getList();
    },
    currentChange(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList("filter");
    },
    getList(flag) {
      if (flag) {
        this.pagination.pageIndex = 1;
      }
      this.loading = true;
      entrustTaskResultList(this.queryForm, this.pagination)
        .then((res) => {
          this.tabldeData = res.data ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    dialogShow() {
      if (this.tableDatas.length !== 1) {
        this.$message.warning("只能选择一条数据");
        return;
      }
      if (this.activeName !== "first") {
        this.$message.warning("请选择待办数据");
        return;
      }
      this.choiceData = this.tableDatas[0];
      this.dialogFormVisible = true;
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    onQuery() {
      this.queryForm.stateDateTime = formatTimeMin(
        this.queryForm.experimentRecordDate[0]
          ? this.queryForm.experimentRecordDate[0]
          : null
      );
      this.queryForm.endDateTime = formatTimeMax(
        this.queryForm.experimentRecordDate[1]
          ? this.queryForm.experimentRecordDate[1]
          : null
      );
      this.getList("filter");
    },
    handleSelectionChange(val) {
      this.tableDatas = val;
    },
    // 清空筛选条件
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.queryForm.stateDateTime = null;
      this.queryForm.endDateTime = null;
      this.getList("filter");
    },
  },
};
</script>
